<template>
  <div class="operation">
    <!-- 搜索框 -->
    <el-row>
      <el-col :span="10" class="search-input">
        <el-input v-model="input_content" placeholder="请输入关键词">
          <!--搜索框前置选择下拉单-->
          <el-select v-model="input_select" slot="prepend" placeholder="请选择">
            <el-option label="Django" value="Django"></el-option>
            <el-option label="PMC" value="PMC"></el-option>
          </el-select>
          <!-- 搜索框后置按钮 -->
          <el-button
            id="search-button"
            slot="append"
            type="primary"
            icon="el-icon-search "
            @click="handleSearch"
            :loading="isLoading"
            style="border-top: none"
            >搜索
          </el-button>
        </el-input>
      </el-col>
    </el-row>

    <!-- 按钮组 -->
    <el-row>
      <el-col :offset="12">
        <!-- 爬虫下一页按钮--执行翻页请求 -->
        <el-button type="primary" class="next-button" @click="handleTurnPage"
          >更多文章<i class="el-icon-arrow-right el-icon--right"></i
        ></el-button>
        <el-button type="primary" @click="handleSelectAll" round
          >全部提取</el-button
        >
        <el-button type="warning" @click="deselectAll" round>全部取消</el-button
        ><el-button type="success" @click="toDownload">下载确认</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import { getPMCList } from "@/js/scripts";

export default {
  name: "Operation",
  data() {
    return {
      input_content: "", // 搜索框中输入内容
      input_select: "", // 搜索框前置选择内容
    };
  },
  computed: {
    ...mapState("search", ["isLoading","pageSize"]),
    ...mapGetters("search", [
      "textList",
      "notDownloadList",
      "readyToDownloadList",
    ]),
  },
  props: [],
  methods: {
    // 搜索请求
    handleSearch() {
      // 搜索请求
      this.$store.dispatch("search/search", {
        term: this.input_content,
        select: this.input_select,
      });
    },

    // 翻页请求
    handleTurnPage(){
      this.$store.dispatch("search/turnPage",{
        term: this.input_content,
        select: this.input_select,
      });
    },

    // 全部准备下载
    handleSelectAll() {
      let list = getPMCList(this.notDownloadList);
      this.$store.commit("UPDATESTATE", { list: list, state: 2 });
    },
    // 取消全选
    deselectAll() {
      let list = getPMCList(this.readyToDownloadList);
      this.$store.commit("UPDATESTATE", { list: list, state: 1 });
    },

    // 转到下载页
    toDownload() {
      this.$router.push("/download");
    },
  },
};
</script>

<style scoped>
/* 搜索框 */
.search-input {
  width: 650px;
  margin: 0 20%;
  margin-bottom: 10px;
}
/* 搜索框前置内容 */
.el-select {
  width: 130px;
}
/* 搜索按钮 */
#search-button {
  color: white;
  background-color: blue;
}
</style>